<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加宝宝信息</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <script src="/resources/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/resources/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/resources/css/app.css">
    <script src="/resources/js/jquery.min.js"></script>

    <style type="text/css">
        .am-cf textarea {
            height: 100px;
        }
    </style>
</head>

<body data-type="widgets">
<script src="/resources/js/theme.js"></script>
<div class="am-g tpl-g">

    <%--头部开始--%>
    <%@include file="header.jsp" %>
    <%--头部结束--%>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">宝宝信息录入</div>
                        </div>

                        <!-- 宝宝信息录入 -->
                        <form class="am-form tpl-form-border-form " id="babyForm" method="post">

                            <!-- 纸质档案编号-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">纸质档案编号</label>
                                <div class="am-u-sm-7">
                                    <input type="text" name="fileNo" class="am-form-field tpl-form-no-bg fileNo"
                                           placeholder="请输入纸质档案编号,输入之后无法更改" maxlength="22"
                                           onkeyup="this.value=this.value.replace(/[^0-9-_]/g,'')"
                                           onblur="this.value=this.value.replace(/[^0-9-_]/g,'')"/>
                                </div>
                                <div class="am-u-sm-2">
                                    <small class="tipFileNo">必填！</small>
                                </div>
                            </div>

                            <!-- 宝宝姓名-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">宝贝姓名</label>
                                <div class="am-u-sm-7">
                                    <input type="text" name="babyName" class="am-form-field tpl-form-no-bg babyName"
                                           placeholder="请输入宝宝姓名" maxlength="4"/>
                                </div>
                                <div class="am-u-sm-2">
                                    <small class="tipBabyName">必填！</small>
                                </div>
                            </div>


                            <!-- 宝宝照片 -->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">宝贝照片</label>
                                <div class="am-form-group am-u-sm-7">
                                    <div class="am-u-sm-7 am-form-file">
                                        <div class="am-u-sm-12">
                                            <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                                <i class="am-icon-cloud-upload"></i> 添加宝贝照片
                                            </button>
                                            <input type="file" class="addBabyPhoto"/>
                                            <input type="text" name="babyPhoto" class="am-hide strPhoto">
                                        </div>
                                    </div>
                                    <div class="am-u-sm-5">
                                        <img class="am-u-sm-12 imagePhoto" style="width: 90px; height: 80px;" alt="未上传">
                                    </div>
                                </div>
                                <div class="am-u-sm-2">
                                    <small class="tipstrPhoto">头像！</small>
                                </div>
                            </div>

                            <!-- 宝宝性别===性别校验-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-md-2 am-u-lg-3 am-form-label">宝贝性别</label>
                                <div class="am-u-md-4 am-u-lg-7">
                                    <div class="am-u-sm-12">
                                        <select class="babySex" nane name="babySex" data-am-selected="{btnSize: 'sm'}">
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="am-u-md-1 am-u-lg-2">
                                    <small></small>
                                </div>

                                <label class="am-u-md-2 am-u-lg-3 am-form-label">是否早产</label>
                                <div class="am-u-md-2 am-u-lg-7">
                                    <div class="am-form-group">
                                        <label class="am-radio-inline">
                                            <input type="radio" name="premature" class="premature" value="1"> 是
                                        </label>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="premature" class="premature" checked="checked"
                                                   value="0"> 否
                                        </label>
                                    </div>
                                </div>

                                <div class="am-u-md-1 am-u-lg-2">
                                    <small></small>
                                </div>
                            </div>

                            <!-- 宝宝年龄-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">宝贝年龄</label>
                                <div class="am-u-sm-7">
                                    <input type="text" name="babyAge" class="am-form-field tpl-form-no-bg babyAge"
                                           placeholder="宝宝年龄(单位岁)，选择出生日期后自动生成" readonly=""
                                           onkeyup="this.value=this.value.replace(/\D/g,'')"
                                           onblur="this.value=this.value.replace(/\D/g,'')"/>
                                </div>
                                <div class="am-u-sm-2">
                                    <small class="tipBabyAge"></small>
                                </div>
                            </div>

                            <!-- 宝宝体重-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">宝贝体重</label>
                                <div class="am-u-sm-7">
                                    <input type="text" name="babyWeight" class="am-form-field tpl-form-no-bg babyWeight"
                                           placeholder="请输入现在宝宝体重(单位：kg),仅限于整数或小数" maxlength="4"/>
                                </div>
                                <div class="am-u-sm-2">
                                    <small class="tipBabyWeight">必填！</small>
                                </div>
                            </div>

                            <!-- 宝宝身高-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">宝贝身高</label>
                                <div class="am-u-sm-7">
                                    <input type="text" name="babyHeight" class="am-form-field tpl-form-no-bg babyHeight"
                                           placeholder="请输入现在宝宝身高(单位：cm),仅限于整数" maxlength="3"/>
                                </div>
                                <div class="am-u-sm-2">
                                    <small class="tipBabyHeight">必填！</small>
                                </div>
                            </div>

                            <!-- 出生日期 -->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">出生日期</label>
                                <div class="am-u-sm-7">
                                    <input type="text" name="babybirthday"
                                           class="am-form-field tpl-form-no-bg babybirthday" placeholder="请选择宝宝出生日期"
                                           data-am-datepicker="" readonly="" required="required"
                                           onchange="countAge();"/>
                                </div>
                                <div class="am-u-sm-2">
                                    <small class="tipBabybirthday">必填！</small>
                                </div>
                            </div>

                            <!-- 喂养史-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">喂养史</label>
                                <div class="am-u-sm-7">
                                    <textarea name="feedHistory" class="am-form-field tpl-form-no-bg feedHistory"
                                              placeholder="请输入宝宝喂养史，最多不超过200字" maxlength="200"></textarea>
                                </div>
                                <div class="am-u-sm-2">
                                </div>
                            </div>

                            <!-- 过敏史-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">过敏史</label>
                                <div class="am-u-sm-7">
                                    <textarea name="allergyHistory" class="am-form-field tpl-form-no-bg allergyHistory"
                                              placeholder="请输入宝宝过敏史，如无可以不填，最多不超过200字" maxlength="200"></textarea>
                                </div>
                                <div class="am-u-sm-2">
                                </div>
                            </div>

                            <!-- 病史-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">病史</label>
                                <div class="am-u-sm-7">
                                    <textarea name="sickHistory" class="am-form-field tpl-form-no-bg sickHistory"
                                              placeholder="请输入宝宝遗传史疾病、过敏史等，如无，可以不填，最多不超过200字" maxlength="200"></textarea>
                                </div>
                                <div class="am-u-sm-2">
                                </div>
                            </div>

                            <!-- 备注-->
                            <div class="am-form-group am-u-md-12 am-u-lg-6">
                                <label class="am-u-sm-3 am-form-label">备注</label>
                                <div class="am-u-sm-7">
                                    <textarea id="notes" name="babyNote" class="am-form-field tpl-form-no-bg babyNote"
                                              placeholder="请输入宝宝的特殊信息，如：第xx胎，出生时体重，出生时身高等特殊信息；最多不超过200字" maxlength="200"></textarea>
                                </div>
                                <div class="am-u-sm-2">
                                </div>
                            </div>

                            <!-- 按钮 -->
                            <div class="am-form-group am-u-md-12 am-u-lg-12">
                                    <span class="am-u-sm-3">
                                    </span>
                                <div class="am-u-sm-7 am-u-sm-push-5">
                                    <%--<button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5" data-am-modal-close="">取消</button>
                                    <span class="am-u-sm-2">
                                    </span>--%>
                                    <button type="button" href="javascript: void(0)" id="submitAddBaby"
                                            class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5">提交
                                    </button>
                                </div>
                                <span class="am-u-sm-2">
                                    </span>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/resources/js/amazeui.min.js"></script>
<script src="/resources/js/amazeui.datatables.min.js"></script>
<script src="/resources/js/dataTables.responsive.min.js"></script>
<script src="/resources/jsutlis/fileutli.js"></script>
<script src="/resources/js/app.js"></script>
<script src="/resources/js/jquery.min.js"></script>
<script>
    // babyName;  姓名
    function isName(name) {
        var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
        return pattern.test(name);
    }

    //数字验证
    function isNumber(number) {
        var pattern = /^[0-9]*$/;
        return pattern.test(number);
    }

    //整数或小数
    function isFloatAdnNUmber(number) {
        var pattern = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
        return pattern.test(number);
    }

    // 宝宝表单验证函数
    function babyFormCheck() {
        var result = "";
        // 判断头像
        if ($.trim($(".strPhoto").val()).length == 0) {
            result += "fail";
            $(".tipstrPhoto").html("*必填！").css("color", "red");
        } else {
            // 验证通过
            $(".tipstrPhoto").html("√").css("color", "green");
        }

        // 判断名字
        if ($.trim($(".babyName").val()).length == 0) {
            result += "fail";
            $(".tipBabyName").html("*必填！").css("color", "red");
        } else {
            if (isName($.trim($(".babyName").val())) == false) {
                result += "fail";
                $(".tipBabyName").html("*格式不正确！").css("color", "red");
            } else {
                // 验证通过
                $(".tipBabyName").html("√").css("color", "green");
            }
        }
        //判断档案编号
        if ($.trim($(".fileNo").val()).length == 0) {
            result += "fail";
            $(".tipFileNo").html("*必填！").css("color", "red");
        } else {
            // 验证通过
            $(".tipFileNo").html("√").css("color", "green");
        }
        //判断年龄
        if ($.trim($(".babyAge").val()).length == 0) {
            result += "fail";
            $(".tipBabyAge").html("*必填！").css("color", "red");
        }/*else if(isFloatAdnNUmber($.trim($(".babyAge").val())) == false)
                  {
                    result += "fail";
                    $(".tipBabyAge").html("*格式不正确！").css("color", "red");
                }*//*else if ($.trim($(".babyAge").val() > 10)){
                        result += "fail";
                        $(".tipBabyAge").html("*宝宝这么大的年龄！").css("color", "red");
                    }*/
        else {
            // 验证通过
            $(".tipBabyAge").html("√").css("color", "green");
        }
        //判断体重
        if ($.trim($(".babyWeight").val()).length == 0) {
            result += "fail";
            $(".tipBabyWeight").html("*必填！").css("color", "red");
        } else if (isFloatAdnNUmber($.trim($(".babyWeight").val())) == false) {
            result += "fail";
            $(".tipBabyWeight").html("*格式不正确！").css("color", "red");
        } else if ($.trim($(".babyWeight").val()) > 60 || $.trim($(".babyWeight").val()) == 0) {
            result += "fail";
            $(".tipBabyWeight").html("*请输入正确的体重!(单位kg)").css("color", "red");
        }
        else {
            // 验证通过
            $(".tipBabyWeight").html("√").css("color", "green");
        }

        //判断身高
        if ($.trim($(".babyHeight").val()).length == 0) {
            result += "fail";
            $(".tipBabyHeight").html("*必填！").css("color", "red");
        } else if (isFloatAdnNUmber($.trim($(".babyHeight").val())) == false) {
            result += "fail";
            $(".tipBabyHeight").html("*格式不正确！").css("color", "red");
        }
        else if ($.trim($(".babyHeight").val()) > 130 || $.trim($(".babyHeight").val()) == 0) {
            result += "fail";
            $(".tipBabyHeight").html("*请输入正确的身高!(单位cm)").css("color", "red");
        } else {
            // 验证通过
            $(".tipBabyHeight").html("√").css("color", "green");
        }

        //判断出身日期
        if ($.trim($(".babybirthday").val()).length == 0) {
            result += "fail";
            $(".tipBabybirthday").html("*必填！").css("color", "red");
        } else if ($.trim($(".babybirthday").val()).length != 0) {
            var birth = $('.babybirthday').val();
            var birthYear = parseInt($('.babybirthday').val().substring(0, 4));
            var date = new Date();
            var nowYear = date.getFullYear();
            var nowDate = timeStampToDate(date.getTime());
            var age = nowYear - birthYear;
            if (age < 0 || age > 100) {
                result += "fail";
                $(".tipBabybirthday").html("*年龄不合法！").css("color", "red");
            } else if (birth > nowDate) {
                result += "fail";
                $(".tipBabybirthday").html("*请选择正确的日期！").css("color", "red");
            } else if (age == 0) {
                $(".babyAge").val("未满1");
                $(".tipBabybirthday").html("√").css("color", "green");
            } else {
                // 验证通过
                $(".babyAge").val(age);
                $(".tipBabybirthday").html("√").css("color", "green");
            }
        }
        // 判断所有验证是否通过
        if (result != "") {
            return false;
        } else {
            return true;
        }
    }

    // 检测档案编号是否已注册
    function isNoFile() {
        var fileNo = $.trim($('.fileNo').val());
        var result = false;
        $.ajax({
            type: "GET",
            url: "/babyInfoController/findOneBabyInfo?fileNo=" + fileNo,
            dataType: "json",
            async: false,  // 同步请求
            success: function (data) {
                console.log(data.bb);
                var babyinfo = data.bb;
                if (babyinfo == undefined || babyinfo == null || babyinfo == ''){
                    result = true;
                }else {
                    if (data.bb.fileNo != fileNo ) {
                        result = true;
                    }
                }

            },
            error: function () {
                alert("编号是已绑定！");
            }
        });
        return result;
    }

    // 添加宝宝信息
    $('#submitAddBaby').on('click', function () {
        if (babyFormCheck()) {
            if (isNoFile()) {
                $.ajax({
                    type: "POST",
                    url: "/babyInfoController/addBabyInfo",
                    dataType: "json",
                    data: $('#babyForm').serialize(),
                    success: function (data) {
                        if (data.result == "true") {
                            alert("添加失败！");
                        } else {
                            alert("添加成功！");
                            window.location.href = "${path }/babyInfoController/findBaby";

                        }
                    },
                    error: function () {
                        alert("发送请求失败！");
                    }
                });
            } else {
                $('.tipFileNo').html("* 该编号已注册").css("color", "red");
                alert("提交失败，请检查红色提示部分！");
            }
        } else {
            alert("您输入的信息有误，请检查红色字段。");
        }
    });

    //根据出生日期计算年龄
    function countAge() {
        var birth = $('.babybirthday').val();
        var birthYear = parseInt($('.babybirthday').val().substring(0, 4));
        var date = new Date();
        var nowYear = date.getFullYear();
        var nowDate = timeStampToDate(date.getTime());
        var age = nowYear - birthYear;
        if (age < 0 || age > 100) {
            $(".tipBabybirthday").html("*年龄不合法！").css("color", "red");
        } else if (birth > nowDate) {
            $(".tipBabybirthday").html("*请选择正确的日期！").css("color", "red");
            $(".babyAge").val("");
        } else if (age == 0) {
            $(".babyAge").val("未满1");
        } else {
            $(".babyAge").val(age);
            $(".tipBabybirthday").html("√").css("color", "green");
        }
    }

    // 时间戳转换成日期格式
    function timeStampToDate(timeStamp) {
        if (timeStamp == null) {
            return null;
        } else {
            var date = new Date(timeStamp);
            Y = date.getFullYear() + '-';
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            D = (date.getDate() + 1 < 10 ? '0' + (date.getDate()) : date.getDate());
            // h = date.getHours() + ':';
            // m = date.getMinutes() + ':';
            // s = date.getSeconds();
            return Y + M + D;
        }
    }

    // 上传头像，并回显
    $(".addBabyPhoto").bind('change', function () {
        var fordate = new FormData();  // 得到一个FormData对象：
        var fils = $(".addBabyPhoto").get(0).files[0];  // 得到file对象
        fordate.append('pic', fils);  // 用append方法添加键值对
        var result = uploadfile('addBabyPhoto'); // 上传头像并返回结果
        if (result.code == 0) {
            $(".imagePhoto").attr({'src': result.data}); // 把图片回显
            $(".strPhoto").val(result.data); // 将路径存入不显示的文本框中
        } else {
            alert("上传头像失败，请重新上传！");
        }
    });
</script>
</body>

</html>